<template>
  <div>
    <div class="nav">
      <div class="w">
        <div class="user-info">
            <span class="user not-login">
                <span><router-link to="/" class="link">商城首页</router-link></span>

                <span class="link js-login" v-if="username !=null && username !=''">
                   <span >欢迎：{{username}}</span>
                   <span class="link js-logout"  @click="logout">退出</span>
                </span>
                <span class="link js-login" v-else>
                    <router-link to="/login" class="link" >请登录</router-link>
                </span>

                <span class="link js-register" >注册</span>
            </span>
        </div>
        <ul class="nav-list">
          <li class="nav-item">
            <router-link class="link" to="/cart">
              <i class="fa fa-shopping-cart"></i>
              购物车(<span class="cart-count">122</span>)
            </router-link>
          </li>
          <li class="nav-item">
            <router-link class="link" to="/orderList">我的订单</router-link>
          </li>
          <li class="nav-item">
            <a class="link" href="./order-list.html">个人中心</a>
          </li>
          <li class="nav-item">
            <a class="link" href="./about.html">我的emall</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
    import VueEventBus from '../model/VueEventBus.js'
    export default {
        name: "Nav",
        data(){
          return{
            username:''
          }
        },
        mounted() {
          this.username = sessionStorage.getItem("username")
          console.log("Nav mounted....")
          //在mounted生命周期回调方法中监听广播事件
          VueEventBus.$on('login-event', (data)=>{
            //接收到广播的数据data 之后，做什么？\
            this.username = data
            console.log("接收到广播，数据为：" + data)
          } )
        },
        methods:{
          //退出登录
          logout:function(){
            sessionStorage.removeItem('username')
            this.username = null
            this.$router.push('/login')
          }
        },
        created() {
          console.log("Nav created....")
        },
        updated() {
          console.log("Nav updated....")
        },
        destroyed() {
          console.log("Nav destroyed....")
        }
    }
</script>

<style scoped>
  .nav{
    background: #eee;
    height: 30px;
    line-height: 30px;
  }
  .nav .user{
    float: left;
  }
  .nav .user.login{
    display: none;
  }
  .nav .user .link{
    margin-right: 5px;
  }
  .nav .nav-list{
    float: right;
  }

  .nav .nav-list .nav-item{
    display: inline-block;
    margin-left: 5px;
  }
</style>
